import React, { Component } from "react";
import { Flex } from "antd-mobile";
import "./index.scss";

import Nav1 from "../../assets/images/fangyuan.png";
import Nav2 from "../../assets/images/hezu.png";
import Nav3 from "../../assets/images/dituzhangfang.png";
import Nav4 from "../../assets/images/chuzu.png";
/**
 * 页面导航
 */
const navs = [
  {
    id: "1",
    name: "整租",
    imgSrc: Nav1,
    path: "/home/houseList",
  },
  {
    id: "2",
    name: "合租",
    imgSrc: Nav2,
    path: "/home/list",
  },
  {
    id: "3",
    name: "地图找房",
    imgSrc: Nav3,
    path: "/map",
  },
  {
    id: "4",
    name: "我要出租",
    imgSrc: Nav4,
    path: "/rent/list",
  },
];

class MyNavigation extends Component {
  render() {
    return (
      <div>
        <Flex className="flexNode">
          {navs.map((item) => {
            return (
              <Flex.Item
                key={item.id}
                onClick={() => {
                  this.props.NavigationRoute(item.path);
                }}
              >
                <img src={item.imgSrc} alt={item.name} />
                <h2>{item.name}</h2>
              </Flex.Item>
            );
          })}
        </Flex>
      </div>
    );
  }
}

export default MyNavigation;
